<template>
  <div v-loading="isLoading"
    v-page-show="{ show: viewType.views == UNIT_TYPE_VIEW_Map.current, text: `请选择'查看当前单位'后方可操作` }">
    <RePage>
      <el-form ref="ruleFormRef" :model="formInline" label-width="auto" label-position="top" :key="formKey">
        <el-row :gutter="30" class="max-w-[60%] min-w-[800px]">
          <re-col :value='12' :xs='12' :sm='12'>
            <el-form-item :label='titles?.screenName' prop='screenName'>
              <el-input :maxlength="30" :show-word-limit="true" v-model.trim='formInline.screenName' clearable
                :placeholder='prompt?.screenName' />
            </el-form-item>
          </re-col>
          <re-col :value='24' :xs='24' :sm='24'>
            <el-form-item :label='titles?.screenLogo' prop='screenLogo'>
              <!-- <ReUpload :isText="true" v-model:files="formInline.screenLogo" :limit="1"></ReUpload> -->
              <div class="flex flex-col">
                <el-image class="w-[586px] h-[42px] mb-[10px]" :src="formInline.screenLogo">
                  <template #error>
                    <div class="image-slot w-[586px] h-[42px] flex justify-center items-center"
                      style="border: 1px solid #999999;">
                      <el-icon><icon-picture /></el-icon>
                    </div>
                  </template>
                </el-image>
                <UploadFile class="leading-[1]" v-model:files="formInline.screenLogo" :limit="1" accept=".png,.jpg">
                </UploadFile>
                <div class="!mt-[0px]  leading-[1] ">
                  <el-text class="!text-[red] !leading-[1] ">
                    注: 推荐图片尺寸为 586*42px
                  </el-text>
                </div>
              </div>

            </el-form-item>
          </re-col>
          <re-col :value='24' :xs='24' :sm='24'>
            <el-form-item :label='titles?.screenTheme' prop='screenTheme'>
              <!-- <el-select v-model="formInline.screenTheme" :placeholder="prompt?.screenTheme" style="width: 100%;">
                <el-option v-for="item in DATA_DASHBOARD_THEME_Map_List" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select> -->
              <div class="w-full">
                <el-image class="w-[192px] h-[108px]" fit="contain"
                 :src="DATA_DASHBOARD_THEME_Map_List.find(item => item.value == formInline.screenTheme)?.img"
                 :preview-src-list="[DATA_DASHBOARD_THEME_Map_List.find(item => item.value == formInline.screenTheme)?.img]" />
              </div>
              <el-radio-group v-model='formInline.screenTheme'>
                <el-radio v-for="item in DATA_DASHBOARD_THEME_Map_List" :key="item.value" :value="item.value">
                  {{ isNullOrEmpty(item.label) }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </re-col>

          <re-col :value='24' :xs='24' :sm='24'>
            <el-form-item :label='titles?.appTheme' prop='appTheme'>
              <el-radio-group v-model='formInline.appTheme'>
                <el-radio v-for="item in APP_THEME_Map_List" :key="item.value" :value="item.value">
                  {{ isNullOrEmpty(item.label) }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </re-col>
          <re-col :value='24' :xs='24' :sm='24'>
            <el-form-item :label='titles?.screenMode' prop='screenMode'>
              <el-radio-group v-model='formInline.screenMode'>
                <el-radio v-for="item in MENU_MODE" :key="item.value" :value="item.value">
                  {{ isNullOrEmpty(item.label) }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </re-col>
          <re-col :value='24' :xs='24' :sm='24' v-if="formInline.screenMode == 2">
            <el-form-item :label='titles?.screenMenus' prop='screenMenus'>
              <pure-table :data="formInline.screenMenus" :columns="initPureTableConfig(roleTableConfig)"
                showOverflowTooltip border :isShowPag="false">
                <template #menuName="{ row }">
                  <el-input v-model.trim='row.menuName' clearable :placeholder='prompt?.menuName' />
                </template>
                <template #menuType="{ row }">
                  <el-select v-model="row.menuType" :placeholder="prompt?.menuType" :style="{ width: '100%' }"
                    @change="(val) => { row.url = null }">
                    <el-option v-for="item in MENU_TYPE" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </template>
                <template #url="{ row }">
                  <systemSelect v-if="row.menuType == 1" v-model='row.url' clearable :placeholder='prompt?.url' />
                  <el-input v-if="row.menuType == 2" v-model.trim='row.url' clearable :placeholder='prompt?.url' />
                  <el-select v-if="row.menuType == 3" v-model="row.url" placeholder="请选择菜单">
                    <el-option v-for="item in ACTION_MENU_TYPE" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </template>
                <template #action="{ row }">
                  <el-space>
                    <sj-link custom-type="sred" :underline="false" @click="deletes(row)">删除</sj-link>
                  </el-space>
                </template>
              </pure-table>
              <el-table :data="[100]" :show-header="false" :border="true" class="cursor-pointer">
                <el-table-column label="">
                  <template #default>
                    <div @click="add" class="text-center  py-[0px] text-[#4583ff]">
                      添加
                    </div>
                  </template>
                </el-table-column>
              </el-table>

              <!-- <sj-button class="mt-2" :style="{ width: '100%' }" type="primary" :icon="Plus"
                                @click="add">添加</sj-button> -->
            </el-form-item>
          </re-col>
        </el-row>
      </el-form>
      <el-button type="primary" @click="save" v-auth="'system.unity.setting'">保存</el-button>
      <!-- <sj-button type="primary" @click="save">保存</sj-button> -->
    </RePage>
  </div>
</template>

<script setup lang="ts">
import { isNullOrEmpty, initPureTableConfig } from '@/utils/functions'
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import RePage from "@/components/RePage/index.vue";
import { MENU_TYPE as ACTION_MENU_TYPE } from '@/constant/projectManagement'
import { ElMessage, type FormRules } from "element-plus";
import { titles, prompt, infoType, defaultInfoForm } from './index';
import ReUpload from "@/components/ReUpload/index.vue";
import UploadFile from "@/components/ReUpload/UploadFile.vue";
import systemSelect from '@/components/select/systemSelect/systemManageSelect.vue'
import { MENU_MODE, MENU_TYPE } from "@/constant/unit-settings";
import { Plus } from '@element-plus/icons-vue';
import { getInfo, editInfo } from '@/api/manage/units-manager/unit-settings/index'
import { usePageVariablesStoreHook, UNIT_TYPE_VIEW_Map } from '@/store/modules/pageVariables'
import { arrayUniqueAndRepeat } from "@/utils/functions";
import { isEmpty } from "@pureadmin/utils";
import { formValidateField } from '@/utils/functions'
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { DATA_DASHBOARD_THEME_Map, DATA_DASHBOARD_THEME_Map_List,APP_THEME_Map_List } from '@/constant/index'
const viewType = usePageVariablesStoreHook().getManage()
const formInline = ref(defaultInfoForm())
const isLoading = ref(false)
const formKey = ref(0)
const ruleFormRef = ref()
const formRules = reactive(<FormRules>{
  id: [{ required: true, message: prompt?.id, trigger: 'blur' },],
  unityId: [{ required: true, message: prompt?.unityId, trigger: 'blur' },],
  screenName: [{ required: true, message: prompt?.screenName, trigger: 'blur' },],
  screenLogo: [{ required: true, message: prompt?.screenLogo, trigger: 'blur' },],
  screenMode: [{ required: true, message: prompt?.screenMode, trigger: 'blur' },],
  screenMenus: [{ required: true, message: prompt?.screenMenus, trigger: 'blur' },],
});
const roleTableConfig = [
  { slot: 'menuName', width: 200, label: titles.menuName },
  { slot: 'menuType', width: 200, label: titles.menuType },
  { slot: 'url', label: titles.url },
  { slot: 'action', label: titles.action, width: 60, fixed: 'right' },
];
onMounted(() => {
  getSettingInfo()
});

const getSettingInfo=()=>{
  isLoading.value = true;
  getInfo().then(res => {
    res.result?.screenMenus?.forEach((item: any) => {
      if (item.menuType != 2) {
        item.url = parseInt(item.url)
      }
    })
    res.result.screenTheme = isNullOrEmpty(res.result.screenTheme, DATA_DASHBOARD_THEME_Map.default)
    res.result.appTheme = isNullOrEmpty(res.result.appTheme, DATA_DASHBOARD_THEME_Map.default)
    formInline.value = res.result
  }).finally(() => {
    formKey.value++
    isLoading.value = false;
  })
}

const add = () => {
  if (formInline.value.screenMenus) {
    if (formInline.value.screenMenus.length >= 10) {
      ElMessage.error('最多添加10个菜单')
      return
    }
    formInline.value.screenMenus.push({
      menuName: null,
      menuType: null,
      url: null,
    })
  } else {
    formInline.value.screenMenus = [{
      menuName: null,
      menuType: null,
      url: null,
    }]
  }
}
const deletes = (row: any) => {
  formInline.value.screenMenus.splice(formInline.value.screenMenus.indexOf(row), 1);
}

const save = () => {
  ruleFormRef.value.validate(valid => {
    if (valid) {
      if (formInline.value.screenMode == 1) {
        isLoading.value = true;
        editInfo(formInline.value).then(res => {
          getSettingInfo()
          ElMessage.success(res.msg)
        }).finally(() => {
          isLoading.value = false;
        })
      } else if (formInline.value.screenMenus.some(item => isEmpty(item.menuName) || isEmpty(item.menuType) || isEmpty(item.url))) {
        ElMessage.error('请检查输入是否完整')
        return
      } else if (arrayUniqueAndRepeat(formInline.value.screenMenus, 'menuName')) {
        ElMessage.error('菜单名称重复')
        return
      } else if (arrayUniqueAndRepeat(formInline.value.screenMenus, item => `menuType: ${item.menuType}, url: ${item.url}`)) {
        ElMessage.error('菜单链接重复')
        return
      } else {
        isLoading.value = true;
        editInfo(formInline.value).then(res => {
          getSettingInfo()
          ElMessage.success(res.msg)
        }).finally(() => {
          isLoading.value = false;
        })
      }
    }
  })
}
</script>
<style scoped lang="scss">
::v-deep(.el-upload-list__item-name) {
  padding: 0 !important;
}

::v-deep(.el-upload-list__item-info) {
  margin-left: 0 !important;
}
</style>
